<style lang="scss">
  .ui-page {
    padding-bottom: 20px;

    .ui-detail-box {
      .ui-detail-btus {
        // text-align: right;
      }
    }

  }


</style>
<template>
  <div class="ui-page">
    <div class="ui-list ui-box">
      <div class="box-header ui-list-header">
        <div>{{this.$route.query.title}}权限详情</div>
        <div>
          <el-button type="primary" size="mini" @click="back">返回</el-button>
        </div>
      </div>
      <div class="ui-detail-box">
        <el-form class="ui-search-form" label-width="120px">
          <el-form-item label="权限id">
            <el-input size="mini" disabled class="ui-item-reset" v-model="permsItem.permissionId"></el-input>
          </el-form-item>
          <el-form-item label="名称">
            <el-input size="mini" class="ui-item-reset" v-model="permsItem.name" :disabled="editFlag"></el-input>
          </el-form-item>
          <el-form-item label="说明">
            <el-input size="mini" class="ui-item-reset" v-model="permsItem.description" :disabled="editFlag"></el-input>
          </el-form-item>
          <el-form-item label="权限标识">
            <el-input size="mini" class="ui-item-reset" v-model="permsItem.perms" :disabled="editFlag"></el-input>
          </el-form-item>
          <el-form-item label="权限类型">
            <el-input size="mini" class="ui-item-reset" v-model="permsItem.type" :disabled="editFlag"></el-input>
          </el-form-item>
          <el-form-item label="权限排序">
            <el-input size="mini" class="ui-item-reset" v-model="permsItem.orderNum" :disabled="editFlag"></el-input>
          </el-form-item>

          <el-form-item label="路径">
            <el-input size="mini" class="ui-item-reset" v-model="permsItem.url" :disabled="editFlag"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select placeholder="请选择" size="mini" class="ui-item-reset" v-model="permsItem.status" disabled>
              <el-option label="禁用" :value="2"></el-option>
              <el-option label="启用" :value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="父级权限">
            <el-select placeholder="父级权限" size="mini" class="item_reset" v-model="permsItem.parentId" clearable
                       :disabled="editFlag">
              <el-option label="无" :value="0"></el-option>
              <el-option :label="item.name" :value="item.permissionId" v-for="item in parentRoute"
                         :key="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-input size="mini" disabled class="ui-item-reset" v-model="permsItem.createTime"></el-input>
          </el-form-item>
          <el-form-item label="更新时间">
            <el-input size="mini" disabled class="ui-item-reset" v-model="permsItem.updateTime"></el-input>
          </el-form-item>
        </el-form>
        <div class="ui-detail-btus">
          <el-button size="mini" @click="editFlag=false" v-if="editFlag">编辑</el-button>
          <el-button size="mini" @click="cancelEdit" v-else>取消</el-button>
          <el-button type="primary" size="mini" @click="saveItem" :disabled="editFlag">保存</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'permissionsDetail',
    data() {
      return {
        permsItem: {
          permissionId: '',
          name: '',
          parentId: '',
          url: '',
          perms: '',
          description: '',
          type: '',
          orderNum: '',
        },
        editFlag: true,
        permissionId: this.$route.query.id,
        parentRoute: [],
      }
    },
    mounted() {
      this.getItem()
      this.initParentRoute()
    },
    methods: {
      back() {
        console.log(this.$route)
        this.$router.back(-1);
      },
      cancelEdit() {
        this.editFlag = !this.editFlag;
        this.getItem()
      },
      saveItem() {
        let params = this.permsItem
        delete params.createTime
        delete params.updateTime
        post(`/pms_api/permission/edit`, this.permsItem).then(res => {
          this.cancelEdit()
          this.getItem()
        }).catch(err => {
          console.log(err)
        })
      },
      getItem() {
        post(`/pms_api/permission/detail?permissionId=${this.permissionId}`).then(res => {
          this.permsItem = res.data[0]
        }).catch(err => {
          console.log(err)
        })
      },
      initParentRoute() {
        this.parentRoute = this.$getGlobal.getItem('routers')
      }
    }
  }
</script>
